<template>
    <div class="container">
        <div class="login">
            <img src="./images/关闭.png" @click="close">
            <div class="imgbox">
                <img src="./images/我的头像.png" alt="">
            </div>
            <div class="txtbox">
                <h3>welcome</h3>
                <input type="text" placeholder="请输入账号" v-model="account">
                <input type="password" placeholder="请输入密码" v-model="password">
                <input @click="submit" type="button" value="登录">
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Login',
    data() {
        return {
            account:'',
            password:""
        }
    },
    methods: {
        close(){
            this.$emit("close",false)
        },
        submit(){
            this.$route.meta.account=this.account
            this.$route.meta.password=this.password
            this.$router.push("/log")
            this.account=""
            this.password=""
            this.close()
        }
    }
}
</script>

<style scoped>
.container {
    position: absolute;
    z-index: 100;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.5s;
}

.login {
    position: relative;
    width: 700px;
    height: 386px;
    background: rgba(255, 255, 255, .2);
    border-left: 2px solid rgba(255, 255, 255, 0.7);
    border-top: 2px solid rgba(255, 255, 255, 0.7);
    border-radius: 20px;
    /* 主要地方:背景滤镜 */
    backdrop-filter: blur(6px);

    box-shadow: 5px 5px 20px rgba(255, 255, 255, .8);
    display: flex;
    justify-content: center;
    align-items: center;
}

.login>img {
    position: absolute;
    right: 20px;
    top: 20px;
    transition: .2s;
    cursor: pointer;
    width: 36px;
}
.login>img:active {
  transform: scale(1.5);
}
.txtbox {
    margin-left: 30px;
}

.txtbox>* {
    display: block;
}

.txtbox input {
    width: 300px;
    height: 36px;
    border-radius: 5px;
    margin-bottom: 10px;
    outline: none;
    border: 1px solid #ccc;
    font-size: 16px;
    box-sizing: border-box;
    text-align: center;
}

.imgbox img {
    width: 150px;

}

.txtbox h3 {
    color: #fff;
    font-size: 45px;
    padding: 25px 0px;
}

.txtbox input[type="button"] {
    color: #fff;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.3);
}

.imgbox img {
    border-radius: 50%;
    filter: saturate(80%);
}</style>